<template>
  <x-collapse expand title="私有配置">
    <a-space fill direction="vertical">
      <a-space class="flex justify-between px-4" fill>
        <div class="text-nowrap">线条颜色</div>
        <a-select
          v-model:value="currentShape.stroke"
          :field-names="{ label: 'title' }"
          :options="colorList"
          style="width: 120px"
        ></a-select>
      </a-space>

      <a-space class="flex justify-between px-4" fill>
        <div class="text-nowrap">背景颜色</div>
        <a-select
          v-model:value="currentShape.fill"
          :field-names="{ label: 'title' }"
          :options="colorList"
          style="width: 120px"
        ></a-select>
      </a-space>
    </a-space>
  </x-collapse>
</template>

<script setup lang="ts">
import { colorList } from '@/data/system.options';
import { currentShape } from '../../../data/shapes';
</script>

<style lang="scss" scoped></style>
